<template>
  <Page name="我的订单">
    <div class="my-wrap">
        <ui-loading v-if="initLoading" class="page-init-loading">
          <div slot="content"></div>
        </ui-loading>
        <div class="tabs">
          <div class="tabs-wrap">
              <ui-tabs ref="tabs" :list="channel" :active="channelId.channel_id" @choose="changeTab"  />
          </div>
        </div>
        <ScrollList :config="config" @bottom="getPage"  @pull="pull">
          <div class="lists" v-if="list.length">
            <div v-for="item in list" class="item">
              <h4 class="title">
                <img :src="item.logo" alt="">
                <span>{{item.shop_name}} </span>
                <span class="tip" v-if="item.pay_uid!=''">已发起代付</span>
                <span >{{item.status_str}}</span>
              </h4>
              <ul>
                <li v-for="child in item.order_goods" @click="goToDetails(item)">
                  <div class="thumb">
                    <img :src="child.thumb" alt="">
                  </div>
                  <div class="info">
                    <h4>
                      <span class="name">{{child.goods_name}}</span>
                      <span>{{child.price}} {{child.currency_code}}</span>
                    </h4>
                    <p>x{{child.num}}</p>
                  </div>
                </li>
              </ul>
              <div class="discount" v-if="item.cash_amount !='0' && item.discount_amount !=''">
                <span class="label">现金支付</span>
                <span class="num">-{{item.cash_amount}} {{item.currency_code}}</span>
                <span class="label">折扣减免</span>
                <span class="num">-{{item.discount_amount}} {{item.currency_code}}</span>
              </div>
              <div class="total">
                共<span>{{item.goods_num}}</span>件商品
                剩余应付：<span>{{item.payable_amount}}{{item.currency_code}}</span>
              </div>

              <div class="ctrl" v-if="item.is_can_question==1 || item.is_can_question==0 || item.pay_status!=1 || item.status==0">
                <button v-if="item.is_can_question==1" @click="getPop(item.order_id,'cancel')">取消存疑</button>
                <button v-if="item.is_can_question==0" @click="getPop(item.order_id,'comfirm')">存疑</button>
                <button v-if="item.pay_status!=1 " class="pay-btn" @click="goToPay(item)">立即支付</button>
                <button v-if="item.status==0 "  @click="getPop(item.order_id,'sure')">确认订单</button>
              </div>
            </div>
          </div>
        </ScrollList>
        <ui-empty :empty="empty" v-if="list.length==0"></ui-empty>
        <ui-popup :status="popup.status" @close="popupClose">
          <div class="popup-common exit-pop" :class="questionType!= 'comfirm'? 'h280' : '' ">
              <div class="exit-content">
                  <p> {{ popInfo.title }} </p>
                  <textarea v-model="popInfo.content"
                    v-if="questionType=='comfirm'"
                    placeholder="请输入存疑原因"></textarea>
              </div>
              <div class="footer">
                  <a href="javascript:;" @click="popupClose">取消</a>
                  <a href="javascript:;" @click="confirm(true)" :class="questionType== 'comfirm' && popInfo.content==''?'gray':''">确定</a>
              </div>
          </div>
        </ui-popup>
        <ui-popup :status="popupPiu.status" @close="popupPiu.status=false">
          <div class="popup-common exit-pop h280">
              <div class="exit-content">
                  <p>该订单已发起代付</p>
              </div>
              <div class="footer">
                  <a href="javascript:;" @click="popupPiu.status=false">等他/她支付</a>
                  <a href="javascript:;" @click="confirmPiu">我自己支付</a>
              </div>
          </div>
        </ui-popup>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';
import Tabs from '~/components/common/tabs.vue';
import popup from "~/components/common/popup";
import ScrollList from '~/components/ScrollList';
import UILoading from  "~/components/loading";
import UiEmpty from  "~/components/empty";
export default {
  components: {
    Page,
    [Tabs.name]:Tabs,
    [popup.name]: popup,
    ScrollList,
    [UILoading.name]: UILoading,
    UiEmpty
  },
  data() {
    return {
      channel:[
        {
          text:"全部",
          id:1,
          tab:"all"
        },
        {
          text:"待支付",
          id:2,
          tab:"my_uppay"
        },
         {
          text:"待确认",
          id:3,
          tab:"my_uncommit"
        },
        {
          text:"存疑",
          id:4,
          tab:"my_doubt"
        },
        {
          text:"已确认",
          id:5,
          tab:"my_affirm"
        },
        {
          text:"已支付",
          id:6,
          tab:"my_repay"
        },
        {
          text:"已作废",
          id:7,
          tab:"my_cancellation"
        },
      ],
      channelId:{
        channel_id:0
      },
      pupStatus:false,
      list: [],
      count_months:{},
      initLoading:true,
      config:{
        bottom:false,
        pull:false,
        end:false,
      },
      page:1,
      total:1,
      loading:false,
      empty:{
        text:"暂无数据"
      },

      popInfo: {
          title: "",
          content: ""
      },

      popup: {
          status: false
      },

      popupPiu:{
         status: false
      },

      tab:this.$utils.getUrlKey("tab"),
      order_id:"",
      questionType:""
    }
  },
  mounted(){
    (async ()=>{
      await this.getPage(this.tab);
    })();
  },
  methods: {
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(this.tab ,true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(tab,isRefresh){
      if(this.loading || this.config.end) return false;
      this.loading = true;
      try{
        let { data:rs } = await this.$axios.post('?ct=api&ac=order_list',{
          page:this.page,
          tab:tab
        })
        if(rs.code == 0){
          this.initLoading = false;
          const { data } = rs;
          this.total = Number(data.total);

          if(isRefresh){
            this.list = data.list;
          }else{
            this.list = this.list.concat(data.list);
          }

          if(this.total>this.list.length){
            this.page++;
          }else{
            this.config.end = true;
          }
        }else{
          this.initLoading = false;
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }

      this.loading = false;
    },
    changeTab(item){
      this.initLoading = true;
      this.config.end=false;
      this.page=1;
      this.loading=false;
      this.list=[];
      this.pupStatus=false;
      this.tab = item.tab;
      this.getPage(item.tab);
    },
    goToDetails(item){
      if(item.pay_uid!=''){
        this.$router.push({name:'order-order-details',query:{order_id:item.order_id,type:'elsepay'}})
      }else{
        this.$router.push({name:'order-order-details',query:{order_id:item.order_id}})
      }

    },
    getPop (id,type) {
      if(type=="comfirm"){
        this.popInfo.title = "确认发起存疑？";
        this.questionType = "comfirm";
      }else if(type=="sure"){
        this.popInfo.title = "确认订单？";
        this.questionType = "sure";
      }else{
         this.popInfo.title = "确认取消存疑？";
         this.questionType = "cancel";
      }
      this.popup.status = true;
      this.order_id = id;
    },
    popupClose () {
      this.popup.status = false;
    },
    confirm () {
      if(this.questionType=='comfirm'){
        if(this.popInfo.content==''){
          return false;
        }
      }
      this.popup.status = false;
      let order_id = this.order_id;
      this.question_order(order_id);
    },
    async question_order(id){
      let params = {};
      let url = "";
      if(this.questionType=="comfirm"){
        url = '?ct=api&ac=question_order';
        params = {
          order_id:id,
          question:this.popInfo.content
        }
      }else if(this.questionType=="cancel"){
        url = '?ct=api&ac=cancal_question_order';
        params = {
          order_id:id,
        }
      }else{
        url = '?ct=api&ac=commit_order';
        params = {
          order_id:id,
        }
      }
      let { data:rs } = await this.$axios.post(url,params)
      if(rs.code == 0){
        this.$toast(rs.msg);
        setTimeout(function(){
          window.location.reload();
        },1000)
      }else{
        this.$toast(rs.msg);
      }
    },
    goToPay(item){
      if(item.pay_uid!=""){
        this.popupPiu.status = true;
        this.order_id = item.order_id;
      }else{
        this.$router.push({name:'pay-confirm',query:{id:item.order_id,type:'order'}});
      }
    },
    confirmPiu(){
      this.$router.push({name:'pay-confirm',query:{id:this.order_id,type:'order',elsepay:1}});
    }
  },
}
</script>

<style lang="less" scoped>
  .tabs-wrap {
    flex: 1;
    overflow: hidden;
    position: fixed;
    top:88px;
    left: 0;
  }
  .tabs {
    display: flex;
    background-color:#fff;
    height:88px;
    border-bottom:1px solid #efefef;

    .ui-tabs {
        border:none;
      }
  }
  .lists{
    margin-top:20px;
    .item{
      padding:0 30px;
      background: #fff;
      margin-bottom:20px;
      &:last-child{
        margin-bottom:0;
      }
      h4.title{
        line-height: 80px;
        font-size:28px;
        font-weight: normal;
        border-bottom:1px solid #ededed;
        img{
          width:48px;
          height:48px;
          border-radius: 48px;
          border:1px solid #ededed;
          margin-right:10px;
          vertical-align: middle;
        }
        span.tip{
          color:#fff;
          background: #f3cb42;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
          border-top-left-radius: 10px;
          font-size:14px;
          margin-left:10px;
          padding:4px 10px;
        }
        span:last-child{
          float: right;
          color:#cd9f01;
        }
      }
      ul {
        padding:20px 0;
        li{
          display: flex;
          display:-webkit-flex;
          flex-direction: row;
          margin-bottom:20px;
          border-bottom:1px solid #ededed;
          padding-bottom:20px;
          &:last-child{
            border-bottom:0;
            padding-bottom:0;
          }
          .thumb{
            width:108px;
            height:108px;
            margin-right:20px;
            img{
              width:108px;
              height:108px;
            }
          }
          .info{
            flex: 1;
            h4{
              display: flex;
              display:-webkit-flex;
              font-size:28px;
              color:#292929;
              font-weight: normal;
              margin-bottom:20px;
              .name{
                width:360px;
                display: block;
                line-height: .6rem;
              }
              span:last-child{
                flex: 1;
                text-align: right;
                color:#999;
              }
            }
            p{
              text-align: right;
              color:#999;
            }
          }

        }
      }
      .total{
        line-height: 80px;
        text-align: right;
        border-top:1px solid #ededed;
        font-size:28px;
        color:#666;
        span:last-child{
          font-weight: 600;
        }
      }
      .discount{
        line-height: 80px;
        text-align: right;
        border-top:1px solid #ededed;
        font-size:28px;
        color:#292929;
        .label{
          border:1px solid #f05521;
          line-height: 24px;
          color:#f05521;
          padding:3px 6px;
          border-radius: 3px;
          display: inline-block;
          font-size:18px;
        }
      }
      .ctrl{
        text-align: right;
        border-top:1px solid #ededed;
        button{
          line-height: 48px;
          border-radius: 48px;
          background: #fff;
          padding: 10px 20px;
          border:1px solid #999;
          font-size:28px;
          color:#666;
          min-width:150px;
          margin:20px 0;
        }
        .pay-btn{
          border:1px solid #50aae7;
          color:#50aae7;
        }
      }
    }
  }
  .popup-common {
      position: absolute;
      left: 11%;
      background: #fff;
      z-index: 999;
      border-radius: 10px;
  }

  .exit-pop {
      top: 40%;
      width: 600px;
      height: 430px;
      &.h280{
        height:280px;
      }
      .exit-content {
          margin-top: 40px;
          text-align: center;
          p {
              margin-top: 60px;
              font-size: 36px;
              color: #282828;
          }
          textarea{
            width:460px;
            height:150px;
            border:2px solid #ededed;
            border-radius: 4px;
            margin-top:20px;
            padding:10px;
            font-size: 30px;
          }
      }
      .footer {
          position: absolute;
          bottom: 0;
          width: 100%;
          display: flex;
          a {
              display: inline-block;
              width: 50%;
              padding: 30px 0;
              text-align: center;
              font-size: 36px;
              border-top: 1px solid #e2e2e2;
              color: #2086f9;
              &:first-child {

                  border-right: 1px solid #e2e2e2;
              }
          }
          .gray{
            color:#999;
          }
      }
  }
</style>
